<template>
    <div class="home-container">
        <nav class="navbar" v-if="userInfo.role == 'customer'">
            <div class="logo">
                <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/client/ape_logo.png" alt="logo" />
                <span class="logo-text" style="margin-left: 10px;">猿商城</span>
            </div>
            <ul class="nav-links">
                <li><router-link to="/">首页</router-link></li>
                <li><router-link to="/cart">购物车</router-link></li>
                <li><router-link to="/user">我的</router-link></li>
                <li><router-link to="/contact">联系我们</router-link></li>
            </ul>
            <div class="search-bar">
                <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/client/search%20%282%29.png" alt="logo" />
                <input type="text" v-model="searchQuery" placeholder="搜索商品..." @keyup.enter="performSearch" />
            </div>
            <div class="user-info" @mouseenter="showMenu" @mouseleave="hideMenu">
                <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/uniapp/avatar/d6abbcd4-5571-4858-8f3d-0ae58970de37.jpg"
                    alt="用户头像" class="avatar" />
                <span style="font-weight: bold;" class="username">{{ username }}</span>
                <div v-if="menuVisible" class="user-menu">
                    <button @click="editUserInfo">修改用户信息</button>
                    <button @click="logout">注销登录</button>
                </div>
            </div>
        </nav>
        <nav class="navbar" v-else>
            <div class="logo">
                <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/client/ape_logo.png" alt="logo" />
                <span class="logo-text" style="margin-left: 10px;">猿商城</span>
            </div>
            <ul class="nav-links">
                <li><router-link to="/product-management">商品管理</router-link></li>
                <li><router-link to="/order-management">订单管理</router-link></li>
                <li><router-link to="/sales-report">销售统计</router-link></li>
                <li><router-link to="/customer-management">客户管理</router-link></li>
                <li><router-link to="/user">我的</router-link></li>
            </ul>
            <div class="search-bar">
                <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/client/search%20%282%29.png" alt="logo" />
                <input type="text" v-model="searchQuery" placeholder="搜索商品..." @keyup.enter="performSearch" />
            </div>
            <div class="user-info" @mouseenter="showMenu" @mouseleave="hideMenu">
                <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/uniapp/avatar/d6abbcd4-5571-4858-8f3d-0ae58970de37.jpg"
                    alt="用户头像" class="avatar" />
                <span class="username">{{ username }}</span>
                <div v-if="menuVisible" class="user-menu">
                    <button @click="editUserInfo">修改用户信息</button>
                    <button @click="logout">注销登录</button>
                </div>
            </div>
        </nav>
        <div class="content" v-if="userInfo.role == 'customer'" style="width: 80%;
    margin: 0 auto; margin-top: 50px;">
            <router-view></router-view>
        </div>
        <div class="content" v-else>
            <router-view></router-view>
        </div>
        <div v-if="userInfo.role == 'customer' && showAdLeft" class="ad-left">
            <button class="close-btn" @click="showAdLeft = false">X</button>
            <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/client/R.jpg" alt="广告" />
        </div>
        <div v-if="userInfo.role == 'customer' && showAdRight" class="ad-right">
            <button class="close-btn" @click="showAdRight = false">X</button>
            <img src="https://xiaoxiongzai.oss-cn-guangzhou.aliyuncs.com/client/MADv8wDzepQ30.webp" alt="广告" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { get } from "../until/request";

const searchQuery = ref('');       // 搜索框内容
const username = ref('');         // 用户名
const menuVisible = ref(false);  // 用户菜单是否显示
const userInfo = ref({});         // 用户信息
const showAdLeft = ref(true);     // 左侧广告显示状态
const showAdRight = ref(true);    // 右侧广告显示状态

const router = useRouter();  // 路由

onMounted(async () => {
    const storedUsername = localStorage.getItem('login');
    if (storedUsername) {
        username.value = JSON.parse(storedUsername).username;
        userInfo.value = JSON.parse(storedUsername);
    }
});

// 搜索商品
function performSearch() {
    if (searchQuery.value.trim()) {
        router.push({ name: 'SearchPage', query: { key: searchQuery.value } });
    }
}

// 切换到搜索页面
function goToSearchPage() {
    router.push({ name: 'SearchPage' });
}

// 显示用户菜单
function showMenu() {
    menuVisible.value = true;
}

// 隐藏用户菜单
function hideMenu() {
    menuVisible.value = false;
}

// 修改用户信息
function editUserInfo() {
    router.push({ name: 'EditUserInfo' });
}

function logout() {
    console.log("注销登录");
    localStorage.clear(); // 清除所有存储
    router.push('/login'); // 重定向到登录页面
}
</script>

<style lang="scss" scoped>
.home-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f0f2f5;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    z-index: 1000;

    .logo {
        font-size: 1.5rem;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }

    .nav-links {
        display: flex;
        list-style: none;

        li {
            margin: 0 1rem;

            a {
                text-decoration: none;
                color: #444;
                transition: color 0.3s;

                &:hover {
                    color: #0056b3;
                }
            }
        }
    }

    .search-bar {
        flex: 1;
        margin: 0 2rem;
        display: flex;
        align-items: center;

        img {
            width: 27px;
            height: 27px;
            margin-right: 10px;
        }

        input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 20px;
        }
    }

    .user-info {
        min-width: 130px;
        padding: 5px 0;
        position: relative;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;

        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }

        .username {
            font-size: 1rem;
            color: #333;
        }

        .user-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;

            button {
                background: none;
                border: none;
                padding: 5px 10px;
                cursor: pointer;
                text-align: left;
                width: 100%;
            }

            button:hover {
                background-color: #f0f0f0;
            }
        }
    }
}

.content {
    flex: 1;
    padding: 2rem;
    background-color: #fff;
    margin-top: 40px;

}

.ad-left,
.ad-right {
    position: fixed;
    bottom: 50%;
    transform: translateY(50%);
    width: 130px;
    height: 300px;
    z-index: 9909;

    img {
        width: 100%;
        height: 100%;
    }
}

.ad-left {
    left: 1px;
}

.ad-right {
    right: 1px;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #333;
}

.close-btn:hover {
    color: #ff0000;
}
</style>